import { FC } from 'react';
import Router from './router';
import AuthRoute from '@/components/AuthRoute.tsx';
import useTheme from '@/hooks/useTheme.ts';
import { ConfigProvider, theme as antdTheme } from 'antd';
import useGlobalStore from './store/global';
import useI18n from './hooks/useI18n';

import { useShallow } from 'zustand/react/shallow';
import { AppContext } from './Context/AppContext';
import { useWatermark } from '@/hooks/useWatermark.ts';
import 'antd/dist/reset.css';
const App: FC = () => {
  const theme = useTheme();
  const { primaryColor ,watermark} = useGlobalStore(
    useShallow((state) => ({
      primaryColor: state.primaryColor,
      watermark: state.isWatermark,
    })),
  )
  useLayoutEffect(()=>{
    if(watermark){
      isAddwatermark()
    }
  },[watermark])
  function isAddwatermark(){
    // eslint-disable-next-line react-hooks/rules-of-hooks
    useWatermark({
      content: 'www.baidu.com',
      fontSize: 18,
      fontColor: '#000',
      rotate: 20,
      zIndex: 9999,
    });
  }

  const { antdLanguage } = useI18n();
  return (
    <AppContext.Provider value={{ theme, appCssTokenKey: 'ra-css-var' }}>
      <ConfigProvider
        locale={antdLanguage}
        theme={{
          algorithm:
            theme == 'dark'
              ? antdTheme.darkAlgorithm
              : antdTheme.defaultAlgorithm,
          token: {
            colorPrimary: primaryColor,
          },
        }}
      >
        <AuthRoute>
          <Router />
        </AuthRoute>
      </ConfigProvider>
    </AppContext.Provider>
  );
};

export default App;
